<template>
    <div class="content">
        <div class="content-left">
            <div class="content-left-item ">
                <div class="moudle-title">生 物 信 息</div>
                <div class="operation-list">
                    <div class="operation-item"><img src="../../assets/images/u630.svg" alt=""> 开机</div>
                    <div class="operation-item"><img src="../../assets/images/u630.svg" alt=""> 关机</div>
                    <div class="operation-item"><img src="../../assets/images/u630.svg" alt=""> 感度</div>
                </div>
                <div class="operation-list">
                    <div class="operation-item"><img src="../../assets/images/u630.svg" alt=""> 距离</div>
                    <div class="operation-item"><img src="../../assets/images/u630.svg" alt=""> 俯视角</div>
                    <div class="operation-item"><img src="../../assets/images/u630.svg" alt=""> TVG</div>
                </div>
                <div class="operation-list">
                    <div class="operation-item"><img src="../../assets/images/u630.svg" alt=""> CM1</div>
                    <div class="operation-item"><img src="../../assets/images/u630.svg" alt=""> 旋钮</div>
                    <div class="operation-item"><img src="../../assets/images/u630.svg" alt=""> 旋钮</div>
                </div>
                <div class="operation-list">
                    <div class="operation-item"><img src="../../assets/images/u630.svg" alt=""> 菜单</div>
                    <div class="operation-item operation-item-sure"><img src="../../assets/images/u630.svg" alt=""> 确认
                    </div>
                </div>
            </div>
            <div class="content-left-item">
                <div class="manual-list">
                    <div class="manual-item">
                        <div class="label">控制方式: </div>
                        <div class="option">
                            <select>
                                <option value="volvo">Volvo</option>
                                <option value="saab">Saab</option>
                            </select>
                        </div>
                        <div class="label1">m</div>
                        <div class="operation-item"><img src="../../assets/images/u630.svg" alt="">上升</div>
                    </div>
                    <div class="manual-item">
                        <div class="label">声呐深度: </div>
                        <div class="option">
                            <select>
                                <option value="volvo">Volvo</option>
                                <option value="saab">Saab</option>
                            </select>
                        </div>
                        <div class="label1">m</div>
                        <div class="operation-item"><img src="../../assets/images/u630.svg" alt="">下降</div>
                    </div>
                    <div class="manual-item">
                        <div class="label">预测打捞量: </div>
                        <div class="option">
                            <select>
                                <option value="volvo">Volvo</option>
                                <option value="saab">Saab</option>
                            </select>
                        </div>
                        <div class="label1">kg</div>
                        <div class="operation-item"><img src="../../assets/images/u630.svg" alt="">确认</div>
                    </div>
                    <div class="manual-item">
                        <div class="label">设置深度: </div>
                        <div class="option">
                            <select>
                                <option value="volvo">Volvo</option>
                                <option value="saab">Saab</option>
                            </select>
                        </div>
                        <div class="label1">m</div>
                        <div class="end-oper"> </div>
                    </div>
                </div>
            </div>
            <div class="content-left-item">
                <rightCenter :title="'报 警 信 息'" />
            </div>
        </div>
        <div class="content-middle">
            <div class="test">
                <img style="width:100%;height:100%;" src="../../assets/images/audio_bg.png" alt="">
            </div>
        </div>

    </div>
</template>

<script lang='ts' setup>
import rightCenter from '../home/components/rightCenter.vue'


</script>
<style lang='scss' scoped>
.content {
    display: flex;
    justify-content: space-between;
    color: #fff;
    height: calc(100% - 90px);

    .content-left {
        width: 24%;
        height: auto;
    }

    .content-left-item {
        width: 100%;
        height: 32%;
        background-image: url("../../assets/images/u34.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 13px;
        margin-top: 5px;

        .moudle-title {
            color: #50e9ff;
            font-size: 16px;
            text-align: center;
            margin-top: 5px;
        }

        .operation-list {
            display: flex;
            justify-content: space-between;
            padding: 10px 30px;
            font-size: 16px;

            .operation-item-sure {
                width: 65%;
            }
        }

        .manual-list {
            padding-top: 10px;

            .manual-item {
                display: flex;
                justify-content: space-between;
                padding: 10px 30px;

                .label {
                    font-size: 14px;
                    color: #1e7ddb;
                    width: 180px;
                }
                .label1 {
                    font-size: 14px;
                    color: #1e7ddb;
                    width: 100px;
                    text-align: center;
                }
                .option {
                    select {
                        width: 120px;
                        height: 26px;
                        border-radius: 6px;
                        background: #089df6;
                        color: #fff;
                    }

                }

                .end-oper {
                    width: 30%;
                }
            }
        }
    }

    .operation-item {
        width: 30%;
        height: 40px;
        border-radius: 5px;
        line-height: 40px;
        background: #266ca2;
        text-align: center;
        border: 1px solid #409eff;
        font-size: 14px;
        cursor: pointer;

        img {
            width: 20px;
            height: 20px;
            margin-right: 5px;
            vertical-align: middle;
        }
    }

    .content-middle {
        width: 75.2%;
        height: auto;
        background-image: url("../../assets/images/u34.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;

    }

}

.test{
     width: 90%;;
     height: 90%;
     margin: 0 auto;
     display: flex;
     align-items: center;
     margin-top: 38px;
}
</style>
  